<!--
 * @Author: your name
 * @Date: 2021-03-20 08:04:11
 * @LastEditTime: 2021-03-27 09:26:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \danshang-admin\src\views\shop\commodityManagement\index.vue
-->
<!-- 商品管理 -->
<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" style="margin-top: 15px" type="border-card">
      <el-tab-pane
        v-for="item in tabMapOptions"
        :key="item.key"
        :label="item.label"
        :name="item.key"
      >
        <div style="display: flex; alignitems: center">
          <keep-alive>
            <div style="display: flex; alignitems: center">
              <span style="fontsize: 12px; margin: 0 20px">商品分类：</span>
              <el-autocomplete
                v-model="state"
                popper-class="my-autocomplete"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                style="width: 400px"
                @select="handleSelect"
              >
                <i
                  slot="suffix"
                  class="el-icon-edit el-input__icon"
                  @click="handleIconClick"
                />
                <template slot-scope="item">
                  <div class="name">{{ item.row.value }}</div>
                </template>
              </el-autocomplete>
            </div>
          </keep-alive>
          <keep-alive>
            <div style="display: flex; alignitems: center">
              <span style="fontsize: 12px; margin: 0 20px">商品搜索：</span>
              <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 400px"
                @input="handleOnInput"
              />
              <el-button
                icon="el-icon-search"
                style="
                  width: 50px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
                @click="handleSearch"
              />
            </div>
          </keep-alive>
        </div>
        <div
          style="
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <el-button type="primary" style="margin: 10px 0" @click="goUrl"
            >添加商品</el-button
          >
          <el-button
            type="primary"
            style="margin: 10px 10px; background: #ccc; border: solid 1px #ccc"
            @click="handleRecycleBlock"
            >商品回收站</el-button
          >
        </div>
        <keep-alive>
          <tab-pane
            v-if="activeName == item.key"
            ref="table"
            :type="item.key"
            @create="showCreatedTimes"
          />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TabPane from "./components/TabPane";
export default {
  name: "Tab",
  components: { TabPane },
  data() {
    return {
      // 表格标题数据
      tabMapOptions: [
        { label: "出售商品", key: "CN" },
        { label: "仓库中的商品", key: "US" },
        { label: "已经售馨商品", key: "JP" }
      ],
      activeName: "CN", // tab切换需要的开关状态
      createdTimes: 0,
      restaurants: [], // 下拉框初始容器
      state: "", // 下拉框v-module双向绑定数据
      input: "" // 文本框输入数据容器
    };
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`);
    }
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  mounted() {
    // 给data里的restaurants容器初始下拉框数据赋值
    this.restaurants = this.loadAll();
  },
  methods: {
    // //添加商品按钮 跳转
    goUrl() {
      this.$router.push("/shop/indexx");
    },
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 下拉框里初始推荐数据
    loadAll() {
      return [
        {
          value: "精品推选",
          shopType: 0
        },
        {
          value: "数码商品",
          shopType: 1
        },
        {
          value: "电脑",
          shopType: 2
        },
        {
          value: "换季大促",
          shopType: 3
        },
        {
          value: "每日优先",
          shopType: 4
        },
        {
          value: "时尚家居",
          shopType: 5
        },
        {
          value: "手机",
          shopType: 6
        },
        {
          value: "照相机",
          shopType: 7
        },
        {
          value: "服装美衣",
          shopType: 8
        }
      ];
    },
    // 下拉框点击每一项
    handleSelect(item) {
      this.$refs.table[0].handleOnSearch(item.shopType);
    },
    // 下拉框里icon点击事件
    handleIconClick(ev) {
      console.log(ev);
    },
    // 打开回收站
    handleRecycleBlock() {
      this.$refs.table[0].handleRecycleBlock();
    },
    // 搜索按钮
    handleSearch() {
      this.$refs.table[0].handleOnSearch(this.input);
    },
    // 监听文本框内容为空
    handleOnInput() {
      if (this.input === "") {
        this.$refs.table[0].getList();
      }
    },
    // 添加商品按钮
    handlePushAddShop() {
      console.log("添加商品");
    }
  }
};
</script>

<style scoped lang="scss">
.tab-container {
  margin: 30px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
